import React, { useEffect, useState } from "react"
import styles from "./projectAnswer.less"
import { observer } from "mobx-react-lite"
import classNames from 'classnames';
import { SearchOutlined,MessageOutlined} from '@ant-design/icons'
import { Table, Input, Button } from "antd"
import { projectAnswer,projectAnswerList} from "@/utils/interface";
import { planListItem, projectlist, userGetInfo, userNumber, } from "@/services";
const status = ['全部', '实训', '答辩', '面试','工作','其他']
const ProjectAnswer:React.FC=()=>{

    let data = {isAsc: "desc", pageNum: 1,pageSize: 10, type:"" ,questionTitle: "",quality: "",
            authentication:"" }
    let [curStatus, setCurStatus] = useState(0)
    let [projectList, setprojectList] = useState<projectAnswerList[]> ([])
    let [title, setTitle] = useState('');
    let [searchTitle, setSearchTitle] = useState('');
    let [Image, setImage] = useState('');
    let [userName, setuserName] = useState('');
    let [numberQuestions, setnumberQuestions] = useState('');
    let [numberReplies, setnumberReplies] = useState('');
    let [replyCount, setreplyCount] = useState('');
    let obj:projectAnswer =  {
        isAsc: 'desc',
        pageNum: 1,
        pageSize: 10,
        type: '',
        questionTitle: '',
        quality: '',
        authentication: ''
      }
    useEffect(() => {
        projectlist(obj).then(res=>{
            console.log(res.rows);
            setprojectList(res.rows)
        })
        userGetInfo().then(res=>{
            // console.log();
            setuserName(res.user.nickName)
            setImage(`http://111.203.59.61:8060${res.user.avatar}`)
        })
        userNumber().then(res=>{
            console.log(res);
            setnumberQuestions(res.data.numberQuestions);
            setnumberReplies(res.data.numberReplies);
            setreplyCount(res.data.replyCount);
            // setuserNumber(res)
        })
    }, [])

    return (
        <div className={styles.projectAnsBox}>
            <div className={styles.BigBox}>
                <div className={styles.box_left}>
                    <div className={styles.answer_tags}>
                        <section className={styles.state}>
                            <h2>类型：</h2>
                            <ul className={styles.statusListb}>
                                {
                                    status.map((item, index) => {
                                        return <span className={index === curStatus ? classNames(styles.span, styles.active) : styles.span} key={item} onClick={e => setCurStatus(index)}>{item}</span>
                                    })
                                }
                            </ul>
                        </section>
                        <section className={styles.inputs}>
                            <div><input type="checkbox" className={styles.inputcheck} />仅看精品</div>
                            <div><input type="checkbox" className={styles.inputcheck} />仅看教师认证答案</div>
                            <div>
                                <Input style={{ width: '210px', height: '35px' }} 
                                    className={styles.input} placeholder="搜索问题" 
                                    suffix={<SearchOutlined 
                                    onClick={() => setSearchTitle(title)} />} 
                                    value={title} 
                                    onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                                        if (e.keyCode === 13) {
                                            setSearchTitle(title)
                                        }
                                    }}
                                 />
                            </div>
                        </section>
                        <section className={styles.lists}>
                            <div className={styles.list_detail}>
                                {
                                    projectList.map(item=>{
                                        return <div className={styles.listItem} key={item.answerId}>
                                            <div className={styles.listItemLeft}>
                                                <div className={styles.leftCop1}>
                                                    <div className={styles.leftCop1Left}>
                                                        <div>{item.qUserName}</div>
                                                        <span>{item.replyTime}</span>
                                                        <div>实训类型：<span className={styles.blue}>面试</span></div>
                                                    </div>
                                                    <div className={styles.leftCop1Right}>
                                                        <MessageOutlined /><div>{item.answerCount}</div>
                                                    </div>
                                                </div>
                                                <div className={styles.leftCon2}>
                                                    <img src="http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg" alt="" />
                                                    <span className={styles.leftCon2Sapn}>{item.questionTitle}</span>
                                                </div>
                                                <div className={styles.leftCon3}>
                                                    <div className={styles.leftCon3Left}>{item.questionContent}</div>
                                                    <div className={styles.leftCon3Right}>查看全部</div>
                                                </div>
                                                <div className={styles.leftCop4}>
                                                    {
                                                        item.labels.map((itsm,ind)=>{
                                                            return<span key={ind} className={styles.itsm}>{itsm}</span>
                                                        })
                                                    }
                                                </div>
                                            </div>
                                            <div className={styles.listItemRight}>回答</div>
                                        </div>
                                    })
                                }
                            </div>
                        </section>
                    </div>
                    
                    
                </div>
                <div className={styles.box_right}>
                    <div className={styles.ask_question}>我要提问</div>
                    <div className={styles.notice}>
                        <div className={styles.my_answer}>
                            <div className={styles.my_an1}>
                                <span></span>
                                <div>我的问答</div>
                            </div>
                            <div className={styles.s_avatar}>
                                <img src={Image} alt="" />
                                <span>{userName}</span>
                            </div>
                            <div className={styles.q_avatar}>
                                <div className={styles.q_avatarLeft}>问</div>
                                <div className={styles.q_avatarRight}>提了 <span>{numberQuestions}</span> 个问题, <span>{numberReplies}</span> 人进行了回答</div>
                            </div>
                            <div className={styles.q_avatar}>
                                <div className={styles.q_avatarLeft2}>答</div>
                                <div className={styles.q_avatarRight}>回答了 <span>{replyCount}</span> 个问题</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default ProjectAnswer
